page {
  background: #f2f3f7;
}

.page-shop-index,.page-shop-prods,.page-shop-category {
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

  /* 头部 */
  .header {
    position: relative;
    height: 380rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
  }

  .header .bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 0;
  }

  .header .bg-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .7);
  }

  .header .search {
    position: relative;
    background: rgba(255, 255, 255, .4);
    height: 60rpx;
    border-radius: 60rpx;
    display: flex;
    align-items: center;
  }

  .header .search .icon {
    width: 24rpx;
    height: 24rpx;
    font-size: 0;
    margin-left: 20rpx;
  }

  .header .search .text {
    flex: 1;
    color: #fff;
    margin-left: 10rpx;
  }


  .header .shop-info {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 170rpx;
    margin-top: 20rpx;
    height: 152rpx;
  }

  .header .shop-info .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 140rpx;
    height: 140rpx;
    font-size: 0;
    border: 6rpx solid #fff;
    border-radius: 50%;
    overflow: hidden;
  }

  .header .shop-info .text-box {
    flex: 1;
    margin-right: 30rpx;
  }

  .header .shop-info .text-box .name {
    font-size: 32rpx;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
  }

  .header .shop-info .text-box .focus-box {
    margin-top: 10rpx;
    display: flex;
    align-items: center;
  }

  .header .shop-info .text-box .focus-box .self {
    padding: 2rpx 6rpx;
    line-height: 20rpx;
    color: #fff;
    background: #fc1b35;
    border-radius: 4rpx;
    margin-right: 10rpx;
    font-size: 20rpx;
  }

  .header .shop-info .text-box .focus-box .focus {
    font-size: 22rpx;
    color: #fff;
  }

  .header .shop-info .collect {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    height: 48rpx;
    color: #fff;
    background: #fc1b35;
    border-radius: 60rpx;
  }

  .header .shop-info .collect .img {
    width: 24rpx;
    height: 24rpx;
    font-size: 0;
    margin-right: 6rpx;
  }

  .header .shop-info .collect .text {
    font-weight: 600;
  }

  /* 店铺首页-店铺信息 */
  .shop-index .shop-info {
    background: #fff;
    border-radius: 10rpx 10rpx 0 0;
    margin-top: -20rpx;
    position: relative;
    display: flex;
    align-items: center;
    padding: 26rpx 30rpx 30rpx 200rpx;
  }

  .shop-index .shop-info .logo {
    position: absolute;
    top: -40rpx;
    left: 30rpx;
    width: 140rpx;
    height: 140rpx;
    font-size: 0;
    border: 6rpx solid #fff;
    border-radius: 50%;
    overflow: hidden;
  }

  .shop-index .shop-info .text-box {
    flex: 1;
    margin-right: 30rpx;
  }

  .shop-index .shop-info .text-box .name {
    font-size: 32rpx;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop-index .shop-info .text-box .focus-box {
    margin-top: 10rpx;
    display: flex;
    align-items: center;
  }

  .shop-index .shop-info .text-box .focus-box .self {
    padding: 2rpx 6rpx;
    line-height: 20rpx;
    color: #fff;
    background: #fc1b35;
    border-radius: 4rpx;
    margin-right: 10rpx;
    font-size: 18rpx;
  }

  .shop-index .shop-info .text-box .focus-box .focus {
    font-size: 20rpx;
    color: #999;
  }

  .shop-index .shop-info .collect {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    height: 48rpx;
    color: #fff;
    background: #fc1b35;
    border-radius: 60rpx;
  }

  .shop-index .shop-info .collect .img {
    width: 24rpx;
    height: 24rpx;
    font-size: 0;
    margin-right: 6rpx;
  }

  .shop-index .shop-info .collect .text {
    font-weight: 600;
  }

  .shop-index .shop-des {
    background: #fff;
    padding: 0 30rpx 30rpx;
    color: #999;
    line-height: 36rpx;
  }

  /* 店铺首页-广告 */
  .shop-index .shop-adv {
    background: #fff;
    padding: 0 30rpx 30rpx;
    background: linear-gradient(to bottom, #fff, #f2f3f7);
    font-size: 0;
  }

  .shop-index .shop-adv image {
    width: 690rpx;
    height: 200rpx;
    border-radius: 10rpx;
  }

  /* 店铺首页-店铺热销 */
  .shop-index .shop-prods .shop-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    border-radius: 10rpx 10rpx 0 0;
  }

  .shop-index .shop-prods .shop-tit .text {
    font-weight: 600;
    font-size: 28rpx;
    margin-left: 4rpx;
  }

  .shop-index .shop-prods .shop-tit .text-arrow {
    color: #999;
    margin-right: 10rpx;
  }

  .shop-index .shop-prods .shop-tit .text-arrow::after {
    border-top: 2rpx solid #999;
    border-right: 2rpx solid #999;
  }

  /* 店铺商品-筛选栏 */
  .shop-prods .header .sortbar {
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    margin-top: 40rpx;
  }

  .shop-prods .header .sortbar .item {
    flex: 1;
    text-align: center;
    height: 46rpx;
    line-height: 46rpx;
    font-size: 26rpx;
    font-weight: 600;
    position: relative;
  }

  .shop-prods .header .sortbar .item.active {
    background: #fff;
    border-radius: 40rpx;
    color: #fc1b35;
  }

  .shop-prods .header .sortbar .item .arrow {
    display: inline-block;
    vertical-align: top;
    margin-left: 10rpx;
    margin-top: 18rpx;
    width: 0;
    height: 0;
    border: 8rpx solid transparent;
    border-top: 8rpx solid #fff;
    border-radius: 4rpx;
  }

  .shop-prods .header .sortbar .item .arrow.cur {
    margin-top: 10rpx;
    border-top: 8rpx solid transparent;
    border-bottom: 8rpx solid #fff;
  }

  .shop-prods .header .sortbar .item.active .arrow {
    border-top: 8rpx solid #fc1b35;
  }

  .shop-prods .header .sortbar .item.active .arrow.cur {
    border-top: 8rpx solid transparent;
    border-bottom: 8rpx solid #fc1b35;
  }

  .shop-prods .header .sortbar .list-style {
    width: 32rpx;
    height: 32rpx;
    font-size: 0;
    padding: 0 10rpx 0 40rpx;
    border-left: 2rpx solid #999;
    margin-left: 40rpx;
  }

  /* 店铺商品-商品列表 */
  .shop-prods .prods-box {
    margin-top: -20rpx;
    position: relative;
  }

  .shop-prods .prods-box.add-bg {
    background: #f2f3f7;
    border-radius: 10rpx 10rpx 0 0;
  }

  /* 店铺分类 */
  .shop-category .category {
    top: 280rpx;
  }

  .shop-category .category .main {
    height: calc(100% - 100rpx - env(safe-area-inset-bottom));
  }

  /* 店铺tabbar */
  .shop-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom);
    max-width: 750rpx;
    margin: auto;
    height: 100rpx;
    background: #fff;
    border-radius: 10rpx 10rpx 0 0;
    box-shadow: 0 -6rpx 6rpx rgba(0, 0, 0, .01);
    display: flex;
    align-items: center;
  }

  .shop-tabbar .item {
    flex: 1;
    text-align: center;
  }

  .shop-tabbar .item .icon {
    width: 36rpx;
    height: 36rpx;
    font-size: 0;
    margin: auto;
  }

  .shop-tabbar .item .text {
    font-size: 20rpx;
    margin-top: 6rpx;
  }

  .shop-tabbar .item.active .text {
    color: #fc1b35;
  }
}